<template>
  <div class="detail">
    <div class="img">
      <!-- 延时加载了 -->
      <img v-lazy="film.poster" />
    </div>
    <div>
      <div>{{ film.name }}</div>
      <div>{{ film.category }}</div>
      <div>{{ film.premiereAt }}</div>
      <div>{{ film.nation }}</div>
    </div>
    <!-- <div>{{ film.synopsis }}</div> -->
    <SwiperSide :key="'actors_' + film.actors.length">
      <div v-for="item in film.actors" class="swiper-slide">
        <div>
          <img :src="item.avatarAddress" />
          <p>名字</p>
        </div>
      </div>
    </SwiperSide>
  </div>
</template>

<script>
import SwiperSide from "../../components/Swiper";
import { detailData } from "../../api/api";
export default {
  components: { SwiperSide },
  data() {
    return {
      id: 0,
      film: { actors: [] },
    };
  },
  created(){
    // 发布一个让底部菜单隐藏的指令
    this.$bus.$emit('footernav',false)
  },
  async mounted() {
    this.id = this.$route.params.id;
    let ret = await detailData(this.id);
    this.film = ret.data.data.film;
    console.log(this.film.actors.length);
  },
  // 组件注销前执行方法
  beforeDestroy(){
     // 发布一个让底部菜单显示的指令
    this.$bus.$emit('footernav',true)
  }
};
</script>

<style lang="scss" scoped>
.swiper-slide{
  img{
    width:80px;
  }
}
.detail {
  .img {
    width: 100%;
    height: 260px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
